<template>
	<v-popup v-model:value="isShow" :title="title" :scrollHeight="scrollHeight" @close="handleClose" @confirm="handleConfirm">
		<view class="series-picker-content">
			<view v-for="(column, columnIndex) in currentList" :key="columnIndex" class="series-picker-column">
				<scroll-view class="series-picker-scroll" scroll-y :style="{ height: scrollHeight + 'rpx' }">
					<view
						v-for="(item, index) in column"
						:key="index"
						class="series-picker-item"
						:class="{ active: item.value === selectedValues[columnIndex] }"
						@click="handleSelect(item, columnIndex)"
					>
						{{ item.label }}
					</view>
				</scroll-view>
			</view>
			<view v-show="safeList.length === 0">
				<slot name="is-null">
					<v-null text="暂无数据"></v-null>
				</slot>
			</view>
		</view>
	</v-popup>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted,inject } from 'vue';

interface PickerItem {
	label: string;
	value: string;
	children?: PickerItem[];
}

/**
 * v-series-picker 拾取器
 * value 是否显示拾取器 默认值:false  可选值true显示、false隐藏
 * list 拾取器数据列表
 * title 拾取器标题
 * selected 默认选中项 默认值:null
 * scrollHeight 拾取器滚动区域高度 默认值:400
 * 相关事件:confirm选中事件、select选择事件
 */
const props = defineProps({
	value: {
		type: Boolean,
		default: false,
		required: true
	},
	list: {
		type: Array as () => PickerItem[],
		default: () => [],
		required: true
	},
	title: {
		type: String,
		default: ''
	},
	selected: {
		type: Array as () => string[],
		default: () => []
	},
	scrollHeight: {
		type: Number,
		default: 400
	}
});

const emit = defineEmits(['update:value','close', 'confirm', 'select']);
const config = inject<any>('config');
const isShow = ref(props.value);
const isActive = ref(false);
const selectedValues = ref(props.selected || []);
const currentList = ref<PickerItem[][]>([]);
const safeList = computed(() => props.list || []);

const initializeSelectedValues = () => {
	selectedValues.value = safeList.value.map((_, index) => {
		if (index === 0) return safeList.value[0].value;
		return '';
	});
};
const updateCurrentList = () => {
	const newList: PickerItem[][] = [];
	let currentItems: PickerItem[] = [...safeList.value];

	for (let i = 0; i < selectedValues.value.length; i++) {
		const selectedValue = selectedValues.value[i];

		if (i === 0) {
			newList.push(currentItems);
		} else if (newList[i - 1] && newList[i - 1].length > 0) {
			const prevItems = newList[i - 1];
			const prevSelectedIndex = prevItems.findIndex((item) => item.value === selectedValues.value[i - 1]);

			if (prevSelectedIndex !== -1 && prevItems[prevSelectedIndex].children) {
				currentItems = prevItems[prevSelectedIndex].children;
				newList.push(currentItems);
			} else {
				break;
			}
		} else {
			break;
		}

		if (selectedValue && currentItems.length) {
			const currentIndex = currentItems.findIndex((item) => item.value === selectedValue);
			if (currentIndex === -1) {
				selectedValues.value = selectedValues.value.map((_, idx) => (idx <= i ? selectedValues.value[idx] : ''));
				break;
			}
		}
	}

	currentList.value = newList;
};

watch(
	() => safeList.value,
	(newList: any) => {
		initializeSelectedValues();
		updateCurrentList();
	},
	{ deep: true, immediate: true }
);

watch(
	() => props.list,
	(newList: any) => {
		console.log(newList);
		initializeSelectedValues();
		updateCurrentList();
	},
	{ deep: true, immediate: true }
);

watch(
	() => props.value,
	(newValue) => {
		isShow.value = newValue;
		isActive.value = newValue;

		if (newValue) {
			initializeSelectedValues();
			updateCurrentList();
		}
	}
);

const handleClose = () => {
	isShow.value = false;
	isActive.value = false;
	emit('update:value', false);
	emit('close', false);
};

const handleSelect = (item: PickerItem, columnIndex: number) => {
	const newSelectedValues = [...selectedValues.value];
	newSelectedValues[columnIndex] = item.value;

	if (columnIndex < newSelectedValues.length - 1) {
		for (let i = columnIndex + 1; i < newSelectedValues.length; i++) {
			newSelectedValues[i] = '';
		}
	}

	selectedValues.value = newSelectedValues;
	emit('select', newSelectedValues[columnIndex]);
	updateCurrentList();
};

const handleConfirm = () => {
	const result: any[] = [];

	currentList.value.forEach((column, index) => {
		const selectedValue = selectedValues.value[index];
		const selectedItem = column.find((item) => item.value === selectedValue);
		if (selectedItem) {
			result.push(selectedItem);
		}
	});
	isShow.value = false;
	isShow.value = false;
	isActive.value = false;
	emit('update:value', false);
	emit('confirm', result);
};
</script>

<style lang="scss" scoped>
.series-picker-content {
	display: flex;
	max-height: 500rpx;
	overflow: hidden;
}

.series-picker-column {
	flex: 1;
	border-right: 1rpx solid v-bind("config.border.color");
}

.series-picker-column:last-child {
	border-right: none;
}

.series-picker-scroll {
	height: 100%;
}

.series-picker-item {
	padding: 20rpx 30rpx;
	font-size: v-bind("config.fontSize.mediumText");
	color: v-bind("config.fontColor.mainText");
	border-bottom: 1rpx solid v-bind("config.border.color");
}

.series-picker-item.active {
	color: v-bind("config.fontColor.default");
	font-weight: 500;
}
</style>
